<template>
  <div class="major-event-detail-content scrollbar" @click="detailOpen">
    <p class="title">{{eventDetail.sjmc}}</p>
    <div class="info">
      <p class="time">事发时间： {{eventDetail.cssjTbsj}}</p>
      <p class="address">事发位置： {{eventDetail.location}}</p>
    </div>
    <div class="desc">
      {{eventDetail.sjnr}}
    </div>
    <div class="images">
      <img v-for="(img,id) in eventDetail.imageList" :key="id" :src="img" @click.stop="previewImg(eventDetail.imageList)" alt="">
    </div>

    <div class="btn-contact">
      <img src="@/assets/event/icon-contact.png" alt />
      <span @click.stop="showPickerClick">联系责任人</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, toRefs, watch, onActivated, onMounted } from 'vue'
import { showImagePreview } from 'vant'
import { useContactStore } from '@/store'

const contactStore = useContactStore()
const showPickerClick = () =>{
  contactStore.fetchUserDetail(props.detail.userId)
}


defineOptions({
  name: 'MajorEventDetail'
})
const emit = defineEmits(['detail-link'])

const props = defineProps({
  detail: {
    type: Object,
    default: {}
  }
})
const eventDetail = ref({})
watch(
  () => props.detail,
  (val) => {
    eventDetail.value = val;
  }
);

const detailOpen = () => {
  emit('detail-link',eventDetail.value)
}

//图片放大查看
const previewImg = (list) => {
  showImagePreview({
    images: list,
    startPosition: 1
  });
}
</script>

<script lang="ts">

</script>

<style lang="less" scoped>
.major-event-detail-content{
  border-radius: 10px;
  background: #FFFFFF;
  color: #212121;
  // width: 310px;
  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.15);
  padding: 20px 15px 40px;
  max-height: 200px;
  min-height: 180px;
  overflow-y: auto;
  margin: 0 0 0 16px;
  .title{
    color: #0E0D16;
    font-weight: bold;
    font-size: 18px;
  }
  .info{
    border-radius: 6px;
    background: #3A75C50F;
    padding: 6px 9px 7px 9px;
    font-size: 12px;
    line-height: 22px;
    margin-top: 8px;
    .time{
      background: url("@/assets/icon/icon-blue-time.png") no-repeat left center;
      background-size: 12px 12px;
      padding-left: 15px;
    }
    .address{
      background: url("@/assets/icon/icon-blue-position.png") no-repeat left 4px;
      background-size: 12px 12px;
      padding-left: 15px;
    }
  }
  .desc{
    margin-top: 7px;
    font-size: 14px;
    line-height: 22px;
  }
  .images{
    margin-top: 7px;
    display: flex;
    flex-wrap: wrap;
    img{
      border-radius: 5px;
      width: 72px;
      height: 72px;
      margin: 0 7px 7px 0;
      &:nth-child(4n){
          margin-right: 0;
      }
    }
  }
  .btn-contact{
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    width: 95px;
    color: #3D76CC;
    border-radius: 50px;
    background: #3A75C519;
    font-size: 13px;
    margin-top: 10px;
    img{
      width: 10px;
      height: 10px;
      margin-right: 3px;
    }
  }
}
</style>

